<template>
    <div>
        <v-data-table
                :headers="headers"
                :items="users"
                hide-actions
                class="elevation-1"
        >
            <template v-slot:items="props">
                <td class="text-xs-center">
                    <div class="img">
                        <v-img
                                width="80px"
                                :src="props.item.avator"
                                aspect-ratio="1"
                                class="grey lighten-2"
                        >
                            <template v-slot:placeholder>
                                <v-layout
                                        fill-height
                                        align-center
                                        justify-center
                                        ma-0
                                >
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                </v-layout>
                            </template>
                        </v-img>
                    </div>
                </td>
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.username }}</td>
                <td class="text-xs-center">{{ props.item.phone }}</td>
                <td class="text-xs-center">{{ props.item.createTime }}</td>
                <td class="text-xs-center">
                    <label class="tb_label" @click.prevent="showdetail(props.item.id)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;查看</label>
                </td>
                <td class="text-xs-center">
                    <div style="margin-left: 30px"  >
                        <v-switch
                        v-model="props.item.state"
                        label=""
                        color="blue"
                        @change="changeState(props.item)"
                ></v-switch>
                    </div>
                </td>
                <td class="text-xs-center">
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="editUser(props.item)">
                            <i class="el-icon-edit"/>
                        </v-btn>
                        <span> 修改用户</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn icon slot="activator" @click="deleteUser( props.item.id)">
                            <i class="el-icon-delete"/>
                        </v-btn>
                        <span> 删除用户</span>
                    </v-tooltip>
                </td>
            </template>
        </v-data-table>
        <!--弹出的对话框-->
        <v-dialog max-width="500" v-model="show" persistent scrollable>
            <v-card>
                <!--对话框的标题-->
                <v-toolbar dense dark color="primary">
                    <v-toolbar-title>{{isEdit ? '修改' : '添加'}}用户</v-toolbar-title>
                    <v-spacer/>
                    <!--关闭窗口的按钮-->
                    <v-btn icon @click="closeWindow">
                        <v-icon>close</v-icon>
                    </v-btn>
                </v-toolbar>
                <!--对话框的内容，表单-->
                <v-card-text class="px-3" style="height: 600px">
                    <user-form :oldUser="oldUser" @close="closeWindow" :is-edit="isEdit" ref="UserForm"/>
                </v-card-text>

            </v-card>
        </v-dialog>
        <div class="text-xs-center pt-2">
            <v-pagination v-model="pagination.page" :length="pagination.totalPage"></v-pagination>
        </div>
    </div>
</template>

<script>
import UserForm from "./UserForm";
export default {
    data () {
        return {
            pagination: {
                    rowsPerPage :5,
                    page:1
                },
            headers: [{text: '头像', align: 'center', sortable: false, value: 'avator'},
                { text: '用户id', value: 'id',align: 'center'},
                { text: '用户名', value: 'userusername',align: 'center' },
                { text: '电话', value: 'phone' ,align: 'center'},
                { text: '注册日期', value: 'createTime',align: 'center' },
                { text: '收藏列表', value: 'collect',align: 'center' },
                { text: '是否禁用', value: 'state',align: 'center' },
                { text: '操作' ,align: 'center'}
            ],
            users: [],
            isEdit: false,
            show: false,
            loading: true,
            oldUser: {},
            totalUsers: 0,
        }
    },
    methods: {
        changeState(user) {
            user.state = user.state?'1':"0"
            console.log(user.state)
            this.$http({
                method: 'put',
                url: "/user/save",
                data: this.$qs.stringify(user)
            });
        },
        getDataFromServer() {
            this.$http.get("/user/page", {
                params: {
                    key: this.search,
                    page: this.pagination.page,
                    rows: this.pagination.rowsPerPage,
                    sortBy: this.pagination.sortBy ? this.pagination.sortBy : "",
                    desc: this.pagination.descending ? this.pagination.descending : "true"
                }
            }).then(resp => {
                this.users = resp.data.items;
                this.pagination.totalItems = resp.data.total;
                this.pagination.totalPage = resp.data.totalPage;
                this.loading = false;
            }).catch(() => {
                this.users = [];
                this.totalUsers = 0;
                this.loading = false;
            })
        },
        editUser(oldUser) {
            this.isEdit = true
            this.show = true
            this.oldUser = oldUser
        },
        //删除
        deleteUser(id) {
            this.$message.confirm("你确定删除该用户嘛").then(()=>{
                this.$http.get("/user/delete?id="+id).then(()=>{
                    this.$message.success("删除成功")
                    this.getDataFromServer();
                }).catch(()=>{
                    this.$message.error("删除失败")
                })})
        },
        closeWindow() {
            // 重新加载数据
            this.getDataFromServer();
            // 关闭窗口
            this.show = false;
        }
    },
    mounted() {
        this.getDataFromServer();
    },
    computed: {
        pages () {
            if (this.pagination.rowsPerPage == null ||
                this.pagination.totalItems == null
            ) return 0
            return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
        }
    },
    watch: {
        pagination: {
            deep: true,
            handler() {this.getDataFromServer();}
        },
    },
    components: {
        UserForm
    }
}
</script>

<style scoped>
    .tb_label{
        cursor: pointer;
        color: #20a0ff;
    }
    .img{
        height: 100px;
        margin: auto;
        padding-top: 10px;
        padding-left: 40px;
    }
</style>